<template>
  <div>
    <el-form :inline="true" style="margin-bottom: -15px" label-width="130px">
      <el-form-item style="margin-bottom: 5px">
        <el-button class="el-icon-sort" type="text" @click="convertTabsShow"></el-button>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select v-model="project" clearable placeholder="所属项目..." size="mini" style="width: 120px">
          <el-option-group :key="group.label" :label="group.label" v-for="group in projectList">
            <el-option v-for="item in group.projectList" :key="item.projectId" :label="item.projectName" :value="item.projectId"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select v-model="devPerson" clearable placeholder="开发负责人..." size="mini" filterable style="width: 120px">
          <el-option-group :key="group.userId" :value="group.userId" :label="group.label"  v-for="group in userList">
            <el-option v-for="item in group.options" :key="item.userId" :label="item.userName" :value="item.userId"></el-option>
          </el-option-group>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-input placeholder="任务分解..." v-model="decomposition" size="mini" clearable style="width: 150px"></el-input>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px">
        <el-select v-model="version" clearable placeholder="计划完成版本..." size="mini" style="width: 120px">
          <el-option v-for="item in versionList" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="status" placeholder="开发状态" size="mini" multiple style="width: 400px">
          <el-option v-for="item in statusList" :key="item.key" :label="item.value" :value="item.key"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" style="margin-bottom: 5px" @click="handleClickSerach">查询</el-button>
      </el-form-item>
      <div style="float:right; margin-top: 5px">
        <pop-vue ref="pop" :role="role"/>
      </div>
    </el-form>
  </div>
</template>

<script>
  import PopVue from './pop.vue'
  import {findByGroup} from '@/api/user'
  import {getVersion} from '@/api/version'
  import {findProjectByGroup} from '@/api/project'
  import {findByPage} from '@/api/task'
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters([
        'window_height'
      ])
    },
    name: "SearchVue",
    props: ['userId', 'role'],
    data() {
      return {
        height: `${document.documentElement.clientHeight}`,
        versionList: [],
        projectList: [
          {
            label: '开发项目',
            projectList: []
          },
          {
            label: '已关闭项目',
            projectList: []
          }
        ],
        statusList: [
          { key: 0, value: '未启动'},
          { key: 1, value: '开发中'},
          { key: 2, value: '已完成'},
          { key: 5, value: '测试中'},
          { key: 6, value: '代码已提交'},
          { key: 4, value: '关闭'}
          // { key: 4, value: '取消'}
        ],
        userList: [{
          label: '组长',
          options: []
        }, {
          label: '开发',
          options: []
        }, {
          label: '测试',
          options: []
        }],
        devPerson: '',
        project: '',
        version: '',
        decomposition: '',
        status: [0, 1, 5, 6],
        popData: {
          userList: [],
          vesrion: [],
          projectList: [],
          group: ''
        }
      }
    },
    methods: {
      convertTabsShow() {
        this.changeTableHeight(this.$parent.show)
        this.$parent.convertShow()
      },
      changeTableHeight(show) {
        // if (show) {
        //   this.$parent.$refs.tableList.tableHeight = this.height>900?830:520
        // } else {
        //   this.$parent.$refs.tableList.tableHeight = this.height>900?765:458
        // }
        if (show) {
          this.$parent.$refs.tableList.tableHeight = this.window_height - 107
        } else {
          this.$parent.$refs.tableList.tableHeight = this.window_height - 169
        }
        // console.log(this.$parent.$refs.tableList.tableHeight)
      },
      handleClickSerach() {
        let data = {
          group: this.popData.group,
          projectId: this.project,
          version: this.version,
          devPerson: this.devPerson,
          decomposition: this.decomposition,
          statusList: this.status.toString()
        }
        var page = this.$parent.$refs.tableList.page
        findByPage(data, page.pageSize, page.pageNum).then(response => {
          this.$parent.$refs.tableList.getTableData(response)
        })
      },
      clickNew(groupId) {
        this.selectData(groupId)
        this.handleClickSerach()
      },
      selectData(groupId) {
        this.popData.group = groupId
        this.userList[0].options=[]
        this.userList[1].options=[]
        this.userList[2].options=[]
        findByGroup(groupId).then(response => {
          this.popData.userList = response
          for (var i=0; i<response.length; i++) {
            var element = response[i]
            if (element.role==="leader") {
              this.userList[0].options.push(element)
            }
            if (element.role==="developer") {
              this.userList[1].options.push(element)
            }
            if (element.role==="tester") {
              this.userList[2].options.push(element)
            }
          }
        });
        this.projectList[0].projectList=[]
        this.projectList[1].projectList=[]
        findProjectByGroup(groupId).then(response => {
          for (let i=0; i<response.length; i++) {
            let element = response[i]
            if (element.status===0) {
              this.projectList[0].projectList.push(element)
            } else {
              this.projectList[1].projectList.push(element)
            }
          }
          this.popData.projectList = response
        })
      },
      initStateData() {
        getVersion().then(response => {
          this.versionList = response
          this.popData = response
        })
        if (this.role==='developer') {
          this.devPerson = this.userId
        }
      }
    },
    components: {
      PopVue
    },
    mounted() {
      this.initStateData()
    }
  }

</script>
